/*
 * @Description: 
 * @Author: 
 * @Date: 2021-08-06 08:53:35
 * @LastEditors: zy
 * @LastEditTime: 2021-08-25 19:18:41
 */
import * as d3 from 'd3'
export class Map {
  title = ''
  divId = ''
  data = ''
  jsonData = ''
  addtionData = ''
  toolTipFarmat = ''
  color = d3.scaleOrdinal(d3.schemeCategory10)
  chart = {}
  constructor (divId) {
    this.divId = divId
  }

  setToolTipFarmat (farmat) {
    this.toolTipFarmat = farmat
  }

  initChart () {
    this.chart.padding = {
      left: 20,
      right: 50,
      top: 20,
      bottom: 20
    }
    this.chart.divHeight = document.getElementById(this.divId).offsetHeight - this.chart.padding.top - this.chart
      .padding.bottom
    this.chart.divWidth = document.getElementById(this.divId).offsetWidth - this.chart.padding.left - this.chart
      .padding.right

    this.chart.svg = d3.select('#' + this.divId).append('svg')
      .attr('width', this.chart.divWidth + this.chart.padding.left + this.chart.padding.right)
      .attr('height', this.chart.divHeight + this.chart.padding.top + this.chart.padding.bottom)
      .attr('class', 'svg_chart')

    // this.chart.tooltip = d3.componentsTooltip({
    //   defsContainer: this.chart.svg
    // })
    //   .container(this.chart.svg)
    //   .content(this.toolTipFarmat)
  }

  initLayout () {
    this.chart.projection = d3.geoMercator()
      .center([107, 34])
      .scale(Math.min(this.chart.divHeight, this.chart.divWidth))
      .translate([this.chart.divWidth / 2, this.chart.divHeight / 2])
    this.chart.path = d3.geoPath()
      .projection(this.chart.projection)
  }

  draw () {
    this.initChart()
    // console.log('222')
    this.initLayout()
    // console.log('333')
    this.drawMap()
    // console.log('444')
    this.drawArea()
    // console.log('555')
    // this.drawLegend()
  }
  drawMap () {
    let chart = this.chart

    let drag = d3.drag() // d3.drag() 创建一个拖曳行为
      .on('drag end', function (event, d) {
        d.x = event.x
        d.y = event.y
        d3.select(this)
          .attr('transform', 'translate(' + d.x + ',' + d.y + ')scale(' + d.k + ')')
      })

    let zoom = d3.zoom()//创建滚动放大缩小的效果
      .scaleExtent([1 / 2, 7])
      .on('zoom', function (event, d) {
        d.x = event.transform.x
        d.y = event.transform.y
        d.k = event.transform.k
        d3.select(this)
          .attr('transform', 'translate(' + d.x + ',' + d.y + ')scale(' + d.k + ')')
      })

    let map = chart.svg.selectAll('.map')
      .data([{
        x: 0,
        y: 0,
        k: 1
      }])
      .enter()
      .append('g')
      .attr('class', 'map')
      .call(drag)
      .call(zoom)
      console.log(this.jsonData.features)
    let paths = map.selectAll('.path')
      .data(this.jsonData.features)
      .enter()
      .append('g')
      .attr('class', 'path')

    paths.append('path')
      .attr('d', chart.path)
      .style('stroke', '#000')
      .style('stroke-width', 1)
      .style('fill', '#ddd')
      
      paths.append('title')
      .text(d => d.properties.name)

    paths.append('text')
      .attr('transform', d => 'translate(' + chart.path.centroid(d) + ')')
      .text(d => d.properties.name)
      .attr('font-size', 8)
  }

  drawArea () {
    let paths = this.chart.svg.selectAll('.path')
    paths.select('path')
      .style('fill', (d, i) => {
        
        return this.color(i)
      })
      .on('mouseover', function () {
        this._color = d3.select(this).style('fill')
        d3.select(this)
          .attr('trsansfrom', 'translate(0,10)')
          .style('fill', 'yellow')
      })
      .on('mouseout', function () {
        d3.select(this)
          .attr('transfrom', 'translate(0,-10)')
          .style('fill', this._color)
      })
  }

  drawLegend () {
    let legendWidth = 15
    let legendHeight = 15
    let yStart = this.chart.divHeight - legendHeight * this.data.length -
      this.chart.padding.bottom

    let legends = this.chart.svg
      .append('g')
      .attr('class', 'legends')

    let legend = legends.selectAll('.legend')
      .data(this.data)
      .enter()
      .append('g')
      .attr('class', 'legend')

    let index = 0
    legend.filter(function (d) {
      return d.shape === 'circle'
    })
      .append('rect')
      .attr('x', this.chart.padding.left)
      .attr('y', (d, i) => {
        index = i
        return yStart + legendHeight * i
      })
      .attr('width', legendWidth)
      .attr('height', legendHeight - 5)
      .style('fill', d => d.itemColor)

    legend.filter(function (d) {
      return d.shape === 'img'
    })
      .append('image')
      .attr('x', this.chart.padding.left)
      .attr('y', (d, i) => {
        index = index === 0 ? index : index + 1
        return yStart + legendHeight * index
      })
      .attr('width', legendWidth)
      .attr('height', legendHeight - 5)
      .attr('xlink:href', d => {
        return d.data[0].imgUrl
      })

    legend.append('text')
      .attr('x', this.chart.padding.left + legendWidth * 1.2)
      .attr('y', (d, i) => (yStart + legendHeight * i + legendHeight / 2))
      .text(d => d.category)
      .attr('font-size', 10)

    // 标题
    this.chart.svg.append('text')
      .attr('x', this.chart.divWidth * 0.45)
      .attr('y', this.chart.padding.top * 1.5)
      .text(this.title)
      .attr('font-weight', 'bold')
  }
}
